框架用好了之後,就是一些功能的串接囉,
還記得之前使用json串接的畫面嗎?現在要從網站的登入畫面進行登入,同時也準備註冊的畫面
登愣
結果測試發現因為使用bootstrapvue又卡關了,這邊直接秀出調整後的程式碼
<div>
  <b-tabs content-class="mt-2">
    <b-tab title="Login" active>
        <h5 class="text-center">Login Please</h5>
        <div class="form-group">
            <label for="exampleInputEmail1">Account</label>
            <!-- <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> -->
            <input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <!-- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> -->
            <input type="password" @keyup.enter="register" v-model="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-group">
            <!-- <button class="btn btn-primary">Login</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab>
    <b-tab title="Register">
        
        <h5 class="text-center">Create New Account</h5>
        <div class="form-group">
            <label for="email">Account</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-group">
            <!-- <button class="btn btn-primary">Register</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab> 
  </b-tabs>
</div>
兩個畫面可以正常切換囉

今天家庭出遊,就寫個段落~
明天正式連接後端的json server!!